<template>
  <div class="app-container home">
  <el-form label-width="80px" style="display: flex; justify-content: center; padding: 30px"
           ref="form" :model="form" :rules="rules">
    <el-row>
      <el-col :span="24" style="margin: 6px; display: flex; justify-content: center">
        <el-form-item style="width: 100%" label="事件名称" prop="eventTitle">
          <el-input v-model="form.eventTitle" placeholder="请输入事件名称" />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="margin: 6px; display: flex; justify-content: center">
        <el-form-item style="width: 100%" label="起止时间" prop="times">
          <el-date-picker v-model="form.times"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          style="width: 100%" />
          <div class="el-form-item__error" style="color: #555 !important;" v-if="showTimeTips === true">
            最大监测时间周期为3个月，开始时间请选在事件发生之前，以保证信息的完整性。
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="position: relative; margin: 6px; display: flex; justify-content: center">
        <el-form-item style="width: 100%" label="事件分类" prop="incidentType">
          <el-input v-model="form.incidentType" style="display: none" />
          <el-select v-model="form.incidentType" placeholder="请选择事件分类" clearable style="width: 100%">
            <el-option v-for="dict in incidentTypeOptions"
                       :key="dict.dictValue"
                       :label="dict.dictLabel"
                       :value="dict.dictValue"
                       style="width: 100%" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="margin: 6px; display: flex; justify-content: center">
        <el-form-item style="width: 100%" label="涉事主体" prop="incidentSubject">
          <el-input v-model="form.incidentSubject" style="display: none" />
          <el-select v-model="form.incidentSubject" placeholder="请选择涉事主体" clearable style="width: 100%">
            <el-option v-for="dict in incidentSubjectOptions"
                       :key="dict.dictValue"
                       :label="dict.dictLabel"
                       :value="dict.dictValue"
                       style="width: 100%" />
          </el-select>
          <div class="el-form-item__error" style="color: #555 !important;" v-if="showIncidentSubjectOptions === true">
            正确填写事件分类及涉事主体会提高相似案例推荐的精准程度哦。
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="margin: 6px; display: flex; justify-content: center">
        <el-form-item style="width: 100%" label="出现位置" prop="searchArea">
          <el-radio-group v-model="form.searchArea">
            <el-radio v-for="dict in searchAreaOptions"
                      :key="dict.dictValue"
                      :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <div style="height: 6px; width: 100%" />
      </el-col>
      <el-col :span="24" style="position: relative; top: 20px; margin: 6px; display: flex; justify-content: center">
        <el-form-item style="width: 100%" label="相关词" prop="relatedWords">
          <el-input v-model="form.relatedWords" type="textarea"
                    :rows="5" placeholder="请输入关键字" :maxlength="500" show-word-limit />
          <div style="display: flex; justify-content: space-between; align-items: center;
                      position: absolute; top: -30px; width: 100%">
            <span style="font-size: 12px">关键词添加支持逻辑规则：“*”（与）、“,”（或）、“()”（词组）；不支持单个关键字</span>
            <el-link type="primary"><div class="key-tips">关键词组合逻辑</div></el-link>
          </div>
          <el-tooltip class="item"
                      effect="dark" content="为确保匹配的信息与您有关，请输入您所关注的地域词、机构名、人名、职务等，如北京工商局，张三副局
                      长，北京张三，工商局副局长；于防敏感词屏蔽的目的请用字母代替，如“政府”用“zf”代替" placement="top">
            <img src="../../assets/images/tips9.svg"
                 style="position: absolute; left: -90px; top: 10px; width: 16px; height: 16px" />
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="position: relative; top: 20px; margin: 6px; display: flex; justify-content: center">
        <el-form-item style="width: 100%" label="事件词" prop="opinionWords">
          <el-input v-model="form.opinionWords" type="textarea"
                    :rows="5" placeholder="请输入事件词" :maxlength="500" show-word-limit />
          <el-tooltip class="item"
                      effect="dark" content="为确保匹配的信息与您有关，请输入您所关注的地域词、机构名、人名、职务等，如北京工商局，张三副局
                      长，北京张三，工商局副局长；于防敏感词屏蔽的目的请用字母代替，如“政府”用“zf”代替" placement="top">
            <img src="../../assets/images/tips9.svg"
                 style="position: absolute; left: -90px; top: 10px; width: 16px; height: 16px" />
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="position: relative; top: 20px; margin: 6px; display: flex; justify-content: center">
        <el-form-item style="width: 100%" label="排除词" prop="exclusionWords">
          <el-input v-model="form.exclusionWords" type="textarea"
                    :rows="5" placeholder="请输入事件词" :maxlength="500" show-word-limit />
          <el-tooltip class="item"
                      effect="dark" content="为确保匹配的信息与您有关，请输入您所关注的地域词、机构名、人名、职务等，如北京工商局，张三副局
                      长，北京张三，工商局副局长；于防敏感词屏蔽的目的请用字母代替，如“政府”用“zf”代替" placement="top">
            <img src="../../assets/images/tips9.svg"
                 style="position: absolute; left: -90px; top: 10px; width: 16px; height: 16px" />
          </el-tooltip>
        </el-form-item>
      </el-col>

      <el-col :span="24" style="margin: 6px; display: flex; justify-content: center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">重 置</el-button>
      </el-col>
    </el-row>
  </el-form>
  </div>
</template>

<script>
  import { addEvents, updateEvents } from "@/api/system/event"
  import Cron from '@/components/Cron'
  export default {
    components: { Cron },
    data() {
      const checkTimes= (rule, value, callback) => {
        if((this.form.times || []).length === 0) {
          this.showTimeTips = false
          return callback(new Error('起止时间不能为空'))
        } else {
          this.showTimeTips = true
          this.form.startTime = `${ this.form.times[0] } 00:00:00`
          this.form.endTime = `${ this.form.times[1] } 00:00:00`
          return callback()
        }
      }
      const checkIncidentType = (rule, value, callback) => {
        if(this.form.incidentType === '') {
          return callback(new Error('事件分类不能为空'))
        } else {
          return callback()
        }
      }
      const checkIncidentSubject = (rule, value, callback) => {
        if(this.form.incidentSubject === '') {
          this.showIncidentSubjectOptions = false
          return callback(new Error('涉事主体不能为空'))
        } else {
          this.showIncidentSubjectOptions = true
          return callback()
        }
      }
      return {
        showCronBox: false,
        // 表单参数
        form: {
          times: [],
          eventId: null,
          createdTime: null,
          startTime: null,
          endTime: null,
          eventTitle: null,
          useTemplate: null,
          userId: null,
          topState: null,
          eventState: null,
          searchArea: null,
          relatedWords: null,
          opinionWords: null,
          exclusionWords: null,
          incidentType: null,
          incidentSubject: null
        },
        // 表单校验
        showTimeTips: true,
        showIncidentSubjectOptions: true,
        rules: {
          eventTitle: [
            { required: true, message: "事件名称不能为空", trigger: "blur" }
          ],
          times: [
            { required: true, validator: checkTimes }
          ],
          incidentType: [
            { required: true, validator: checkIncidentType }
          ],
          incidentSubject: [
            { required: true, validator: checkIncidentSubject }
          ],
          searchArea: [
            { required: true, message: "出现位置不能为空", trigger: "blur" }
          ],
          relatedWords: [
            { required: true, message: "相关词不能为空", trigger: "blur" }
          ],
        },
        searchAreaOptions:[],
        incidentTypeOptions:[],
        incidentSubjectOptions:[],
      }
    },
    created() {
      //接收修改传的值
      this.form.eventId = this.$route.query.eventId
      this.form.startTime = this.$route.query.startTime
      this.form.endTime = this.$route.query.endTime
      this.form.eventTitle = this.$route.query.eventTitle
      this.form.searchArea = this.$route.query.searchArea
      this.form.relatedWords = this.$route.query.relatedWords
      this.form.opinionWords = this.$route.query.opinionWords
      this.form.exclusionWords = this.$route.query.exclusionWords
      this.form.incidentType = this.$route.query.incidentType
      this.form.incidentSubject = this.$route.query.incidentSubject
      if(this.form.startTime!=null){
        this.form.times[0]=this.form.startTime
      }
      if(this.form.endTime!=null) {
        this.form.times[1] = this.form.endTime
      }
      this.getDicts("search_area_options").then(response => {
        this.searchAreaOptions = response.data;
      });
      this.getDicts("event_type").then(response => {
        this.incidentTypeOptions = response.data;
      });
      this.getDicts("incident_subject").then(response => {
        this.incidentSubjectOptions = response.data;
      });
    },
    methods: {
      // 取消按钮
      cancel() {
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          eventId: null,
          createdTime: null,
          startTime: null,
          endTime: null,
          eventTitle: null,
          useTemplate: null,
          userId: null,
          topState: null,
          eventState: null,
          searchArea: null,
          relatedWords: null,
          opinionWords: null,
          exclusionWords: null,
          incidentType: null,
          incidentSubject: null
        };
        this.resetForm("form");
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.eventId != null) {
              updateEvents(this.form).then(response => {
                this.msgSuccess("修改成功");
              });
              this.reset()
            } else {
              addEvents(this.form).then(response => {
                this.msgSuccess("新增成功");
              });
              this.reset()
            }
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .home {
    background-color: white;
    margin-top: 10px;
    margin-right: 10px;
  }
  .key-tips {
    position: relative;
    font-size: 12px;
    &:hover::before {
      content: '';
      position: absolute;
      z-index: 99999;
      top: -324px;
      right: 0px;
      width: 624px;
      height: 324px;
      background: url('../../assets/images/tishi.svg');
      background-size: cover;
    }
  }
</style>

<style>
  a.el-link.el-link--primary.is-underline::after {
    display: none !important;
  }
  .el-tooltip__popper {
    width: 432px !important;
  }
</style>
